import React, { Fragment } from 'react';
import { Button, Drawer, message, Popconfirm, Space, Table } from "antd";
import AddDept from "./AddDept";
import EditDept from "./EditDept";

class Demo2 extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state={
      visible:false,
      editVisible:false,
      tableData:[],
      currentDept:{},
    }
  }

  // eslint-disable-next-line react/sort-comp
  refreshData=()=>{
    console.log("execute refreshData");
    const url = "http://1.94.134.166:8805/dept/list?parentId=0";
    fetch(url,{
      method:"GET",
      headers:{
        Authorization:localStorage.getItem('Authorization')
      },
    })
      .then((response)=>response.json())
      .then((res)=>{
        const {data}=res;
        // eslint-disable-next-line react/no-unused-state
        this.setState({tableData:data});
      });
  }



  // eslint-disable-next-line react/sort-comp
  dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];

  componentDidMount() {
    this.refreshData();
  }

  deleteConfirm=(record)=>{
    const url = "http://1.94.134.166:8805/dept/" + record.deptId;
    fetch(url,{
      method:'DELETE',
      headers:{
        'Content-Type':'application/json',
        Authorization:localStorage.getItem('Authorization'),
      },
    }).then((response) => response.json())
      .then((res)=>{
        console.log(res)
        const{code=0, msg=""}=res;
        if (code==0) {
          // 数据添加成功后，刷新父组件数据
          this.refreshData()
          message.info(msg);
        }
      })
  }

  deleteCancel=()=>{

  }

  columns = [
    {
      title: '序号',
      key: 'index',
      render: (_, record, index) => {
        return(index+1)
      },
    },
    {
      title: '部门名称',
      dataIndex: 'deptName',
      key: 'deptName',
    },
    {
      title: '部门拼音',
      dataIndex: 'deptPy',
      key: 'deptPy',
    },
    {
      title: '联系人电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => {
        const popConfirmTitle=`是否删除${record.deptName}`;
         return (<Space size="middle">
           <a onClick={()=>this.handleEdit(record)}>编辑</a>
           <Popconfirm
             title={popConfirmTitle}
             onConfirm={()=>this.deleteConfirm(record)}
             onCancel={this.deleteCancel}
             okText="Yes"
             cancelText="No"
           >
             <a>删除</a>
           </Popconfirm>
         </Space>);
      },
    },
  ];

  handleEdit=(data)=>{
    this.setState({
      editVisible:true,
      currentDept:data,
    });
  }

  handleOpenDrawer=()=>{
    this.setState({visible:true});
  }

  onClose=()=>{
    this.setState({visible:false})
  }

  onEditDrawerClose=()=>{
    this.setState({editVisible:false})
  }
  render() {
    return (
      <Fragment>
        <Button type="primary" onClick={this.handleOpenDrawer}>新增</Button>
        <Table dataSource={this.state.tableData} columns={this.columns} />;
        <Drawer
          title="新增部门"
          placement="right"
          width="50%"
          onClose={this.onClose}
          open={this.state.visible}
        >
          <AddDept
            refresh={this.refreshData}
            closeDrawer={this.onClose}
          />
        </Drawer>
        <Drawer
          title="编辑部门"
          placement="left"
          width="50%"
          onClose={this.onEditDrawerClose}
          open={this.state.editVisible}
        >
          <EditDept
            refresh={this.refreshData}
            closeDrawer={this.onEditDrawerClose}
            currentData={this.state.currentDept}
          />
        </Drawer>
      </Fragment>
    );
  }
}

export default Demo2;
